import styled from 'styled-components';
import { TTextareaProps } from './Textarea.types';
import { hexToRgba } from '../common/functions'; 
import { INPUT_COLORS } from '../common/SelectTextfieldTextareaConstants';

/**
 * Стилизованное многострочное поле ввода.
 * @param {IStyledTextarea} props - Свойства компонента.
 * @returns {React.Element} - Стилизованное многострочное поле ввода.
 */
export const StyledTextarea = styled.textarea<TTextareaProps>`
    resize: none;
    width: 24.8125rem;
    height: 8.25rem;

    &:focus {
    border-color: ${INPUT_COLORS.focus};
    outline: none;
    box-shadow: 0 0 3px 2px ${hexToRgba(INPUT_COLORS.focus, 0.5)};
  }
`;